<script setup>
defineProps({
  width: Number,
  show: Boolean,
})
</script>

<template>
  <div v-show="show" class="loading-container">
    <span>加载模型中</span>

    <div class="loading-progress-rail">
      <div :style="{ width: `${width}%` }" class="loading-progress-fill" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loading-container {
  @apply absolute left-0 top-0 flex flex-col gap-16px wh-full justify-center items-center;
}

.loading-progress-rail {
  @apply w-200px h-4px bg-#555 rd overflow-hidden;
}

.loading-progress-fill {
  @apply w-0 h-4px transition-width-200;
  background: rgba(var(--va-primary-rbg), var(--un-bg-opacity));
}
</style>
